<template>
	<view class="box">
		<view class="custom-nav-bar">
			<text class="back-button"></text>
			<text class="title">发现</text>
			<text class="search-button">
				<wd-icon name="search" size="1.5rem" @click="getSearch"></wd-icon>
			</text>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="white"
			indicator-active-color="red" circular>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../static/买车.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../static/家电.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../static/景色.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../static/化妆品.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../static/狂欢购.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 主体跳转 -->
		<view class="boxALL">
			<uni-list :border="true" style="background-color: #282c34; border-radius: 10%">
				<uni-list-chat v-for="(item, index) in avatarList" :key="index" class="custom-chat" :title="item.title"
					:note="item.note" badge-positon="left" badge-text="dot" :avatar="item.url" clickable link
					:to="item.path">
					<view class="chat-custom-right">
						<uni-icons type="right" color="white" size="18"></uni-icons>
					</view>
				</uni-list-chat>
			</uni-list>
		</view>
		<Bot class="bottom"></Bot>
	</view>
</template>

<script setup lanfg="ts">
	import {
		ref,
		onMounted
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import Bot from "../Component/bottom.vue";
	import {
		test
	} from "../../api/api";

	const router = useRouter();


	//列表数据
	const avatarList = ref([{
			url: "https://img1.baidu.com/it/u=1845081493,167272575&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
			title: "吃喝玩乐",
			note: "享受人生,感受生活",
			path: "/pages/Find/Happy/Happy"
		},
		{
			url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
			title: "消息",
			note: "指尖对话,畅所欲言",
			path: "/pages/Find/News/News"
		}
	]);

	//跳转到搜索页面
	const getSearch = () => {
		uni.navigateTo({
			url: "/pages/Search/Search"
		});
	};

	// Web Worker


	const worker = ref(null);

	const onLoad = () => {
		// 检查当前环境是否支持Web Worker
		if (typeof worker !== "undefined") {
			try {
				// 正确的路径应该根据你的项目结构调整
				worker.value = new Worker("../../static/web");
				worker.value.onmessage = handleMessage();

				// 向 Worker 发送消息以启动请求
				worker.value.postMessage({
					method: "GET",
					url: "/Find/index/aaa", // 替换为实际API端点
					body: null // 如果是GET请求，这里通常是null
				});
			} catch (error) {
				console.error("Failed to create worker:", error);
			}
		}
	};

	const handleMessage = (e) => {
		testaaa();
		// if (e.data.error) {
		// 	console.error("An error occurred:", e.data.error);
		// } else {
		// 	// 处理接收到的数据...
		// 	console.log("Data:", e.data);
		// }

	};
	const testaaa = async () => {
		let res = await test({});
		console.log(res.code);
	};

	const onUnload = () => {
		// 清理 Worker
		if (worker.value) {
			worker.value.terminate();
			worker.value = null;
		}
	};

	onMounted(() => {
		onLoad();
	});
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		background-color: #282c34;
		color: white;
	}

	.custom-nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		padding-top: 1rem;
		margin-bottom: 1.5rem;
		border-bottom: 1px solid #282c34;
		background-color: black;
	}

	.back-button {
		font-size: 30rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
	}

	// 轮埠哦图
	swiper {
		margin-bottom: 1.5rem;
	}

	.item_box {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.swiper-item {
		width: 95%;
		height: 100%;
		border: 1px solid #282c34;
	}

	//列表
	.chat-custom-right {
		color: white;
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.custom-chat {
		width: 95%;
		margin: 0.3rem auto;
		background-color: #727477;
		color: white;
		border: 1px solid silver;

		//修改title的颜色为白色
		.uni-list-chat__title {
			color: white;
		}
	}

	.chat-custom-text {
		font-size: 12px;
		color: white;
	}

	//底部组件
	.bottom {
		//定位到底部
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>